<template>
  <div class="wrapper">
    <div class="item-detail-show">
      <!-- 详情左侧展示数据、图片，收藏、举报 -->
      <div class="item-detail-left">
        <!-- 大图、放大镜 -->
        <div class="item-detail-big-img">
          <pic-zoom :url="images[imgIndex].imgUrl" :scale="2"></pic-zoom>
        </div>
        <div style="margin-top:10px;rgb(153, 149, 149);">
          实物商品
        </div>
        <!-- <div
          v-else-if="skuDetail.goodsType == 'VIRTUAL_GOODS'"
          style="margin-top:10px;rgb(153, 149, 149);"
        >
          虚拟商品
        </div> -->
        <div class="item-detail-img-row">
          <div
            class="item-detail-img-small"
            @mouseover="imgIndex = index"
            v-for="(item, index) in images"
            :key="index"
          >
            <img :src="item.imgUrl" />
          </div>
        </div>

        <div class="goodsConfig mt_10">
          <span @click="collect">
            <Icon
              type="ios-heart"
              :color="isCollected ? '#ed3f14' : '#666'"
            />{{ isCollected ? '已收藏' : '收藏' }}
          </span>
        </div>
      </div>
      <!-- 右侧商品信息、活动信息、操作展示 -->
      <div class="item-detail-right">
        <div class="item-detail-title">
          <p>
            {{ productDetail.skuTitle }}
          </p>
        </div>
        <div class="sell-point">{{ productDetail.skuTitle }}......</div>
        <!-- 限时秒杀 -->
        <Promotion
          v-if="promotionMap['SECKILL']"
          :time="promotionMap['SECKILL'].endTime"
        ></Promotion>
        <!-- 商品详细 价格、优惠券、促销 -->
        <div class="item-detail-price-row">
          <div class="item-price-left">
            <!-- 秒杀价格 -->
            <div
              class="item-price-row"
              v-if="skuDetail.promotionPrice && promotionMap['SECKILL']"
            >
              <p>
                <span class="item-price-title" v-if="promotionMap['SECKILL']"
                  >秒 &nbsp;杀&nbsp;价</span
                >
                <span class="item-price">{{
                  skuDetail.promotionPrice | unitPrice('￥')
                }}</span>
                <span class="item-price-old">{{
                  skuDetail.price | unitPrice('￥')
                }}</span>
              </p>
            </div>
            <!-- 商品原价 -->
            <div class="item-price-row" v-else>
              <!-- 批发价格 -->
              <div v-if="wholesaleNum && wholesaleNum.length">
                <div class="flex">
                  <div class="item-price-title">
                    价 &nbsp;&nbsp;&nbsp;&nbsp;格
                  </div>

                  <div
                    v-for="(item, index) in wholesalePrice"
                    :key="index"
                    class="item-price item-num"
                  >
                    {{ item | unitPrice('￥') }}
                  </div>
                </div>
                <div class="flex">
                  <div class="item-price-title">起 批 量</div>
                  <div
                    v-for="(item, index) in wholesaleNum"
                    :key="index"
                    class="item-num item-price-num"
                  >
                    {{ item }}{{ skuDetail.goodsUnit }}
                  </div>
                </div>
              </div>

              <!-- 普通价格 -->
              <div v-else>
                <span class="item-price-title"
                  >价 &nbsp;&nbsp;&nbsp;&nbsp;格</span
                >
                <span class="item-price">{{
                  productDetail.skuPrice | unitPrice('￥')
                }}</span>
              </div>
            </div>
            <!-- 优惠券展示 -->
            <div class="item-price-row" v-if="promotionMap['COUPON'].length">
              <p>
                <span class="item-price-title">优 惠 券</span>
                <span
                  class="item-coupon"
                  v-for="(item, index) in productDetail.coupons"
                  :key="index"
                  @click="receiveCoupon(item.id)"
                >
                  <span v-if="item.couponType == 'PRICE'"
                    >满{{ item.consumeThreshold }}减{{ item.price }}</span
                  >
                  <span v-if="item.couponType == 'DISCOUNT'"
                    >满{{ item.consumeThreshold }}打{{
                      item.couponDiscount
                    }}折</span
                  >
                </span>
              </p>
            </div>
            <!-- 满减 -->
            <div
              class="item-price-row"
              v-if="promotionMap['FULL_DISCOUNT'].length"
            >
              <p>
                <span class="item-price-title"
                  >促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span
                >
                <span class="item-promotion">满减</span>
                <span
                  class="item-desc-pintuan"
                  v-for="(item, index) in promotionMap['FULL_DISCOUNT']"
                  v-if="item.fullMinusFlag"
                  :key="index"
                  >满{{ item.fullMoney }}元，立减现金{{
                    item.fullMinus
                  }}元；</span
                >
                <span
                  class="item-desc-pintuan"
                  v-for="(item, index) in promotionMap['FULL_DISCOUNT']"
                  v-if="item.fullRateFlag"
                  :key="index"
                  >满{{ item.fullMoney }}元，打{{ item.fullRate }}折；</span
                >
              </p>
            </div>
          </div>
          <div class="item-price-right">
            <div class="item-remarks-sum">
              <p>累计评价</p>
              <p>
                <span class="item-remarks-num"
                  >{{ productDetail.commentNum }} 条</span
                >
              </p>
            </div>
          </div>
        </div>
        <!-- 选择颜色 -->
        <div class="item-select" v-for="(sku, index) in saleAttrs" :key="index">
          <div class="item-select-title">
            <p>选择{{ sku.title }}:</p>
          </div>
          <div class="item-select-column">
            <div
              class="item-select-row"
              v-for="(item, i) in sku.values"
              :key="i"
            >
              <div
                class="item-select-box"
                @click="selectSaleAttr(index, item.attrValue, i, item.skuIds)"
                :class="{
                  'item-select-box-active':
                    item.attrValue === currentSelcetedAttr[index],
                }"
              >
                <div class="item-select-intro">
                  <p>{{ item.attrValue }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <br />
        <div class="add-buy-car-box">
          <div class="item-select">
            <div class="item-select-title">
              <p>数量</p>
            </div>
            <div class="item-select-row">
              <InputNumber
                :min="1"
                :max="productDetail.quantity"
                :disabled="productDetail.quantity === 0"
                v-model="count"
                :precision="0.1"
              ></InputNumber>
              <span class="inventory"> 库存{{ productDetail.quantity }}件</span>
            </div>
          </div>
          <div
            class="item-select"
            v-if="
              skuDetail.goodsType !== 'VIRTUAL_GOODS' && skuDetail.weight !== 0
            "
          >
            <div class="item-select-title">
              <p>重量</p>
            </div>
            <div class="item-select-row">
              <span class="inventory"> {{ productDetail.weight }}g</span>
            </div>
          </div>
          <div class="add-buy-car">
            <!-- <Button type="error" :loading="loading" :disabled="skuDetail.quantity === 0" @click="pointPay">积分购买</Button> -->
          </div>
          <div class="add-buy-car" v-if="productDetail.quantity != 0">
            <Button
              type="error"
              :loading="loading"
              :disabled="productDetail.quantity === 0"
              @click="addShoppingCartBtn"
              >加入购物车</Button
            >
            <Button
              type="warning"
              :loading="loading1"
              :disabled="productDetail.quantity === 0"
              @click="buyNow"
              >立即购买</Button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Promotion from './Promotion.vue';
import PicZoom from 'vue-piczoom'; // 图片放大
import {
  collectGoods,
  isCollection,
  receiveCoupon,
  cancelCollect,
} from '@/api/member.js';
import { addCartGoods } from '@/api/cart.js';
import * as ApiMember from '@/api/MyApi/Member';
export default {
  name: 'ShowGoods',
  props: {
    // 商品数据
    detail: {
      type: Object,
      default: null,
    },
  },
  watch: {
    detail: {
      handler(val) {
        // 将页面传递的商品详情进行赋值
        this.productDetail = val;
        document.title = this.productDetail.skuTitle;

        // this.skuDetail = val.data;
        // this.wholesaleList = val.wholesaleList

        // 优惠券赋值
        this.coupons = val.coupons;
        // 满减信息赋值
        this.fullReduce = val.fullReduce;
        // 销售属性赋值
        this.saleAttrs = val.saleAttr;

        // 初始化nowItemList 因为要根据saleAttrs的数量进行选择
        this.saleAttrs.forEach((attr, index) => {
          let nowList = {
            attrIndex: index,
            valueIndex: null,
            value: '',
            skuIds: [],
          };
          this.nowItemList.push(nowList);
        });
        // 展示图片适配
        this.images = [];
        this.swiperGoodsImg();

        // 获取收藏数据
        let userInfo = JSON.parse(localStorage.getItem('userInfo'));
        if (userInfo) {
          ApiMember.isColletcion(userInfo.id, this.productDetail.skuId).then(
            (res) => {
              if (res.data.code == 201) {
                this.isCollected = true;
              } else {
                this.isCollected = false;
              }
            }
          );
        }
        this.promotion();
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      wholesaleList: [],
      count: 1, // 商品数量
      imgIndex: 0, // 展示图片下标
      currentSelceted: [], // 当前商品sku
      imgList: [{ url: '' }], // 商品图片列表
      skuDetail: {
        specList: [],
      }, // sku详情
      goodsSpecList: this.detail.specs, // 商品spec
      promotionMap: {
        // 活动状态
        SECKILL: null,
        FULL_DISCOUNT: null,
        COUPON: [],
      }, // 促销活动
      formatList: [], // 选择商品品类的数组
      loading: false, // 立即购买loading
      loading1: false, // 加入购物车loading
      isCollected: false, // 是否收藏
      productDetail: {}, // 我的商品详情
      images: [], // 我的展示图片列表
      coupons: [], // 优惠券
      fullReduce: [], // 满减信息
      saleAttrs: [], // 销售属性(选颜色和存储)
      currentSelcetedAttr: [], // 当前选中的attr
      isSelected: false,
      selectedName: '',
      nowItemList: [], // 现在选中的item的集合
    };
  },
  components: { PicZoom, Promotion },
  computed: {
    wholesalePrice(key) {
      return this.wholesaleList.length
        ? this.wholesaleList.map((item) => {
            return item.price;
          })
        : [];
    },
    wholesaleNum(key) {
      return this.wholesaleList.length
        ? this.wholesaleList.map((item) => {
            return item.num;
          })
        : [];
    },
  },
  methods: {
    select(index, value) {
      // 选择规格
      this.$set(this.currentSelceted, index, value);
      let selectedSkuId = this.goodsSpecList.find((i) => {
        let matched = true;
        let specValues = i.specValues.filter((j) => j.specName !== 'images');
        for (let n = 0; n < specValues.length; n++) {
          if (specValues[n].specValue !== this.currentSelceted[n]) {
            matched = false;
            return;
          }
        }
        if (matched) {
          return i;
        }
      });
      this.$emit('handleClickSku', {
        skuId: selectedSkuId.skuId,
        goodsId: this.skuDetail.goodsId,
      });
    },

    addShoppingCartBtn() {
      // 添加购物车
      // const params = {
      //   num: this.count,
      //   skuId: this.skuDetail.id,
      // };
      // this.loading = true;
      // addCartGoods(params)
      //   .then((res) => {
      //     this.loading = false;
      //     if (res.success) {
      //       this.$router.push({
      //         path: "/shoppingCart",
      //         query: { detail: this.skuDetail, count: this.count },
      //       });
      //     } else {
      //       this.$Message.warning(res.message);
      //     }
      //   })
      //   .catch(() => {
      //     this.loading = false;
      //   });

      let params = {};
      let userInfo = JSON.parse(localStorage.getItem('userInfo'));
      params.skuId = this.productDetail.skuId;
      params.spuId = this.productDetail.spuId;
      params.memberId = userInfo.id;
      params.catalogId = this.productDetail.catalogId;
      params.skuName = this.productDetail.skuTitle;
      params.skuImg = this.productDetail.skuImg;
      params.skuPrice = this.productDetail.skuPrice;
      params.productCount = this.count;
      params.brandName = this.productDetail.brandName;
      params.storeId = this.productDetail.storeId;
      params.storeName = this.productDetail.storeName;
      let data = JSON.parse(JSON.stringify(params));
      this.loading = true;
      console.log('测试参数:', data);
      ApiMember.addCart(data)
        .then((res) => {
          this.loading = false;
          if (res.data.code == 201) {
            this.$router.push({
              path: '/shoppingCart',
              query: { detail: this.productDetail, count: this.count },
            });
          } else {
            this.$Message.warning(res.data.message);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    buyNow() {
      // 立即购买
      let userInfo = JSON.parse(localStorage.getItem('userInfo'));
      const params = {
        num: this.count,
        skuId: this.productDetail.skuId,
        userId: userInfo.id,
        type: 'BUY_NOW',
      };
      console.log('测试立即购买参数:', params);
      this.$router.push({
        path: '/pay',
        query: {
          num: this.count,
          skuId: this.productDetail.skuId,
          spuId: this.productDetail.spuId,
          userId: userInfo.id,
          type: 'BUY_NOW',
        },
      });
      // 虚拟商品购买
      // if (this.skuDetail.goodsType === 'VIRTUAL_GOODS') {
      //   params.cartType = 'VIRTUAL';
      // }
      // this.loading1 = true;
      // addCartGoods(params)
      //   .then((res) => {
      //     this.loading1 = false;
      //     if (res.success) {
      //       this.$router.push({
      //         path: '/pay',
      //         query: { way: params.cartType },
      //       });
      //     } else {
      //       this.$Message.warning(res.message);
      //     }
      //   })
      //   .catch(() => {
      //     this.loading1 = false;
      //   });
    },
    async collect() {
      // 收藏商品
      let userInfo = JSON.parse(localStorage.getItem('userInfo'));
      if (this.isCollected) {
        // let cancel = await cancelCollect("GOODS", this.skuDetail.id);
        // if (cancel.success) {
        //   this.$Message.success("取消收藏成功");
        //   this.isCollected = false;
        // }
        let cancel = await ApiMember.cancelCollection(
          userInfo.id,
          this.productDetail.skuId
        );
        if (cancel.data.code == 201) {
          this.$Message.success('取消收藏成功');
          this.isCollected = false;
        } else {
          this.$Message.error('网络延迟请重试');
        }
      } else {
        let params = {};
        params.memberId = userInfo.id;
        params.spuId = this.productDetail.spuId;
        params.skuId = this.productDetail.skuId;
        params.skuName = this.productDetail.skuTitle;
        params.skuImg = this.productDetail.skuImg;
        params.skuPrice = this.productDetail.skuPrice;
        params.brandName = this.productDetail.brandName;
        params.catalogId = this.productDetail.catalogId;
        params.storeId = this.productDetail.storeId;
        params.storeName = this.productDetail.storeName;
        let data = JSON.parse(JSON.stringify(params));
        let collect = await ApiMember.collectProduct(data);
        if (collect.data.code == 201) {
          this.isCollected = true;
          this.$Message.success('收藏商品成功,可以前往个人中心我的收藏查看');
        } else {
          this.$Message.error(collect.data.message);
        }
        // let collect = await collectGoods("GOODS", this.skuDetail.id);
        // if (collect.code === 200) {
        //   this.isCollected = true;
        //   this.$Message.success("收藏商品成功,可以前往个人中心我的收藏查看");
        // }
      }
    },
    // 格式化数据
    formatSku(list) {
      let arr = [{}];
      list.forEach((item, index) => {
        item.specValues.forEach((spec, specIndex) => {
          let name = spec.specName;
          let values = {
            value: spec.specValue,
            quantity: item.quantity,
          };
          if (name === 'images') {
            return;
          }

          arr.forEach((arrItem, arrIndex) => {
            if (
              arrItem.name === name &&
              arrItem.values &&
              !arrItem.values.find((i) => i.value === values.value)
            ) {
              arrItem.values.push(values);
            }

            let keys = arr.map((key) => {
              return key.name;
            });
            if (!keys.includes(name)) {
              arr.push({
                name: name,
                values: [values],
              });
            }
          });
        });
      });
      arr.shift();
      this.formatList = arr;

      let cur = list.filter((i) => i.skuId === this.$route.query.skuId)[0];
      if (cur) {
        cur.specValues
          .filter((i) => i.specName !== 'images')
          .forEach((value, _index) => {
            this.currentSelceted[_index] = value.specValue;
          });
      }
      this.skuList = list;
    },
    receiveCoupon(id) {
      // 领取优惠券
      receiveCoupon(id).then((res) => {
        if (res.success) {
          this.$Message.success('优惠券领取成功');
        } else {
          this.$Message.warning(res.message);
        }
      });
    },
    promotion() {
      // 格式化促销活动，返回当前促销的对象
      if (!this.productDetail.promotionMap) return false;
      let keysArr = Object.keys(this.productDetail.promotionMap);
      if (keysArr.length === 0) return false;

      for (let i = 0; i < keysArr.length; i++) {
        let key = keysArr[i].split('-')[0];
        if (key === 'COUPON') {
          this.promotionMap[key].push(
            this.productDetail.promotionMap[keysArr[i]]
          );
        } else {
          this.promotionMap[key] = this.productDetail.promotionMap[keysArr[i]];
        }
      }
      console.log('this.promotionMap：', this.promotionMap);
    },
    swiperGoodsImg() {
      // this.skuDetail.images.forEach((e) => {
      //   if (e.specName === "images") {
      //     this.imgList = e.imgUrl;
      //   }
      // });
      // 适配图片
      this.productDetail.images.forEach((img) => {
        this.images.push(img);
      });
    },
    // 选择saleAttr
    selectSaleAttr(index, name, valueIndex, skuIds) {
      this.$set(this.currentSelcetedAttr, index, name);

      this.nowItemList[index].valueIndex = valueIndex;
      this.nowItemList[index].value = name;
      this.nowItemList[index].skuIds = skuIds;

      let skuId = null;

      // 如果全部的属性都选择完毕(选择的item和saleAttrs的数量相同或者大于 就进行跳转)
      if (this.currentSelcetedAttr.length >= this.saleAttrs.length) {
        let temp = 0;
        // 判断sku是否有交集
        // 试错写法 不删记录一下 因为foreach无法中断循环导nowItemList不断堆积发生多次跳转
        // this.nowItemList.forEach((item, index) => {
        //   item.skuIds.forEach(id => {
        //     for (let i = index; i < this.nowItemList[index + 1].skuIds.length; i++) {
        //       if (id == this.nowItemList[index + 1].skuIds[i]) {
        //         skuId = id
        //         temp++;
        //         break;
        //       }
        //     }
        //   })
        //   if (temp == this.saleAttrs.length - 1) {
        //     console.log('跳转执行');
        //     console.log('测试nowItemList:',this.nowItemList);
        //     console.log('最后确定的sku:' + skuId);
        //     console.log('传入的cateId', this.productDetail.catalogId);
        //     this.$emit("handleClickSku", {
        //       skuId: skuId,
        //       goodsId: this.productDetail.catalogId,
        //     });
        //   }
        // })

        for (let i = 0; i < this.nowItemList.length; i++) {
          for (let j = 0; j < this.nowItemList[i].skuIds.length; j++) {
            for (let k = i; k < this.nowItemList[i + 1].skuIds.length; k++) {
              if (
                this.nowItemList[i].skuIds[j] ==
                this.nowItemList[i + 1].skuIds[k]
              ) {
                // console.log('id匹配成功');
                skuId = this.nowItemList[i].skuIds[j];
                temp++;
                break;
              }
            }
          }
          // console.log('skuid:',skuId);
          // console.log('temp:',temp);

          if (temp == this.saleAttrs.length - 1) {
            //console.log('跳转执行');
            //console.log('测试nowItemList:',this.nowItemList);
            //console.log('最后确定的sku:' + skuId);
            //console.log('传入的cateId', this.productDetail.catalogId);
            this.$emit('handleClickSku', {
              skuId: skuId,
              catalogId: this.productDetail.catalogId,
            });

            break;
          }
        }
      }
    },
  },
  mounted() {
    // 用户登录才会判断是否收藏
    // if (this.Cookies.getItem("userInfo")) {
    //   isCollection("GOODS", this.skuDetail.id).then((res) => {
    //     if (res.success && res.result) {
    //       this.isCollected = true;
    //     }
    //   });
    // }
    // let userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
    // if (userInfo) {
    //   console.log('获取收藏数据');
    //   ApiMember.isColletcion(userInfo.id, this.productDetail.skuId).then(res => {
    //     if (res.data.code == 201) {
    //       this.isCollected = true
    //     } else {
    //       this.isCollected = false;
    //     }
    //   })
    // }
    // this.formatSku(this.goodsSpecList);
    // this.promotion();
  },
};
</script>

<style scoped lang="scss">
/******************商品图片及购买详情开始******************/
.item-detail-see {
  width: 175px;
  margin-left: 30px;
}

.flex {
  display: flex;
}

.inventory {
  padding-left: 4px;
}

.wrapper {
  @include white_background_color();
}

.item-num {
  text-align: center;
  width: 100px;
}

.item-price-num {
  font-size: 16px;
  color: #666;
}

.item-detail-show {
  width: 1200px;
  margin: 0 auto;
  padding: 30px;
  display: flex;
  flex-direction: row;
}

.item-detail-left {
  width: 350px;
  margin-right: 30px;
}

.item-detail-big-img {
  width: 350px;
  height: 350px;
  box-shadow: 0px 0px 8px $border_color;
  cursor: pointer;
}

.item-detail-big-img img {
  width: 100%;
}

.item-detail-img-row {
  margin-top: 15px;
  display: flex;
}

.item-detail-img-small {
  width: 68px;
  height: 68px;
  box-shadow: 0px 0px 8px #ccc;
  cursor: pointer;
  margin-left: 5px;
}

.item-detail-img-small img {
  height: 100%;
  width: 100%;
}

/*商品选购详情*/
.item-detail-right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.item-detail-title p {
  @include content_color($light_content_color);
  font-weight: bold;
  font-size: 20px;
  padding: 8px 0;
}

.item-detail-express {
  font-size: 14px;
  padding: 2px 3px;
  border-radius: 3px;
  background-color: $theme_color;
  color: #fff;
}

/*商品标签*/
.item-detail-tag {
  padding: 8px 0;
  font-size: 12px;
  color: $theme_color;
}

/*价格详情等*/
.item-detail-price-row {
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: url('../../assets/images/goodsDetail/price-bg.png');
}

.item-price-left {
  display: flex;
  flex-direction: column;
}

.item-price-title {
  color: #999999;
  font-size: 14px;
  margin-right: 15px;
}

.item-price-row {
  margin: 5px 0px;
}

.item-price {
  color: $theme_color;
  font-size: 20px;
  cursor: pointer;
}

.item-price-old {
  color: gray;
  text-decoration: line-through;
  font-size: 14px;
  margin-left: 5px;
}

.item-coupon {
  margin-right: 5px;
  padding: 3px;
  color: $theme_color;
  font-size: 12px;
  background-color: #ffdedf;
  border: 1px dotted $theme_color;
  cursor: pointer;
}

.item-promotion {
  margin-right: 5px;
  padding: 3px;
  color: $theme_color;
  font-size: 12px;
  border: 1px solid $theme_color;
}

.item-remarks-sum {
  padding-left: 8px;
  border-left: 1px solid $border_color;
}

.item-remarks-sum p {
  color: #999999;
  font-size: 12px;
  line-height: 10px;
  text-align: center;
}

.item-remarks-num {
  line-height: 18px;
  color: #005eb7;
}

.item-select {
  display: flex;
  flex-direction: row;
  margin-top: 15px;
}

.item-select-title {
  @include content_color($light_content_color);
  font-size: 14px;
  margin-right: 15px;
  width: 60px;
}

.item-select-column {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
}

.item-select-row {
  margin-bottom: 8px;
}

.item-select-box {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.item-select-box {
  padding: 5px;
  margin-right: 8px;
  @include background_color($light_background_color);
  border: 0.5px solid $border_color;
  cursor: pointer;
  @include content_color($light_content_color);
}

.item-select-box:hover {
  border: 0.5px solid $theme_color;
}

.item-select-box-active {
  border: 0.5px solid $theme_color;
}

.item-select-intro p {
  margin: 0px;
  padding: 5px;
}

.add-buy-car-box {
  width: 100%;
  margin-top: 15px;
  border-top: 1px dotted $border_color;
}

.add-buy-car {
  margin-top: 15px;

  > * {
    margin: 0 4px;
  }
}

.goodsConfig {
  display: flex;
  justify-content: space-between;

  > span {
    padding-right: 10px;

    &:hover {
      cursor: pointer;
      color: $theme_color;
    }
  }
}

.sell-point {
  font-size: 12px;
  color: red;
  margin-bottom: 5px;
}

/******************商品图片及购买详情结束******************/
</style>
